<template>
	<view class="container">
		<view class="heard">
			<!-- <text >搭电</text>
			<text>轮胎</text>
			<text>拖车</text> -->
			<!-- 表单单选框 -->
			<view>
				<radio-group @change="getValue" v-model="selectedValue">
					<label class="radio-container" v-for="(item, index) in radioOptions" :key="index">
						<radio style="transform:scale(0.8);" :value="item.value">{{ item.label }}</radio>
					</label>
				</radio-group>
			</view>
			
			<view class="xiahua"></view>
		</view>
		<view class="cerent">
			<view class="input1"   v-show="isShow2">
				<txet>位置:</txet><input v-model="helperName" placeholder="请输入地址" />
			</view>
			
			<view v-show="isShow" class="deass">
				<text>起点:</text>	<input v-model="helperName" placeholder="请输入起点" />
				<view>
				<text>终点:</text>	<input v-model="helperName" placeholder="请输入起点" />
				</view>
				
			</view>
			<view class="input1">
			<text>求助人:</text>	<input v-model="helperName" placeholder="请输入求助人姓名" />
			</view>
			<view class="input2">
				<text>联系方式:</text><input v-model="helperName" placeholder="请输入联系方式" />
			</view>
			<view class="input3">
				<text>车牌:</text><input v-model="helperName" placeholder="车牌" />
			</view>
			<text class="red">请准确描述当前状况选择所需要的帮助.</text>
		</view>
		
		<b><text>警务求助：</text></b>
		<select v-model="selectedOption">
			<option value="请选择">请选择</option>
			<option value="交通事故">交通事故122</option>
			<option value="急救中心">急救中心120</option>
			<option value="火警">火警119</option>
			<option value="公安报警">公安报警110</option>
		</select>
		<button @click="callForHelp">呼叫救援</button>
		<text class="size" @click="showRescueRecords">救援记录></text> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedOption:"请选择",
				helperName: "",
				
				// 控制部分标签的显示与隐藏
				isShow: false,
				isShow2: true,
				
				
				// 单选框部分
				selectedValue: '',
				radioOptions: [{
						label: '搭电',
						value: 'r1'
					},
					{
						label: '轮胎',
						value: 'r1'
					},
					{
						label: '拖车',
						value: 'r3'
					},
					
				],
			}
		},

		methods: {
			showRescueRecords() {
				uni.navigateTo({
					url:"/pages/service/jilu/jilu"
				})

			},
			getValue(e) {
				console.log(e.detail.value)
				this.isChoose = e.detail.value
				if (e.detail.value == 'r1') {
					this.isShow = false
				} else {
					this.isShow = !this.isShow
					this.isShow2=false
					
				}
			},

		}

	}
</script>

<style>
	.deass{
		width: 375px;
		height: 80px;
		
	}
	.deass text{
		line-height: 35px;
		
	}
	.deass input{
		width: 228px;
	    height: 30px;
	}
	.cerent text{
	font-size: 15px;
	font-weight: 600;
	
	}
	.red{
		color: red;
	}
	button{
		margin-top: 20px;
		
		background-color:orange;
		border-radius:30px ;
		width: 233px;
		height: 37px;
	}
	.size{
		color: blue;
		margin-left: 140px;
		line-height: 40px;
		font-size: 18px;
		
	}
	.container {
		padding: 20px;
		

	}

	.heard {
		text-align: center;
	}

	.heard text {
		margin-right: 30px;
		font-size: 25px;
	}

	input {
		width: 228px;
		height: 30px;
		border: 1px solid black;
		float: right;
		margin-right: 50px;

	}

	.xiahua {
		width: 45px;
		height: 0.3125rem;
		background-color: blue;

	}

	.cerent {
		margin-top: 20px;
		margin-bottom: 30px;
		
	}


	.input1 {
		width: 375px;
		height: 58px;
		border-bottom: 1px solid cornflowerblue;
		margin-top: 10px;
		

	}

	.input2 {
		width: 375px;
		height: 58px;
		border-bottom: 1px solid cornflowerblue;
		margin-top: 10px;
	}

	.input3 {
		width: 375px;
		height: 58px;
		border-bottom: 1px solid cornflowerblue;
		margin-top: 10px;
	}

	 .input3{
		width: 375px;
		height: 58px;
		border-bottom: 1px solid cornflowerblue;
		margin-top: 10px;
	}
</style>